<template>
  <div class="operate-container" v-loading="loading">
  <st-sections title="操作记录列表" >
    <el-timeline v-if="formLogList.length!=0">
      <el-timeline-item v-for="item of formLogList" :timestamp="item.createdTime" placement="top">
        <el-card>
        <el-collapse>
        <el-collapse-item :title="item.createdBy + ' ' + item.businessTypeDisp + '客户'" name="1">
          <div v-for="(field,index) of item.equatorFieldList">
            {{index+1 + '. ' + item.businessTypeDisp + '  “' + field.fieldNote + '” 由 “' +field.firstVal + '” 变更为 “' + field.secondVal+'"；'}}
          </div>
        </el-collapse-item>
        </el-collapse>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div v-else>
      <st-empty></st-empty>
    </div>
  </st-sections>
  </div>
</template>
<script>
import { listLog } from '@/api/system/formLog'
export default {
  props:{
    customerForm:{
      type:Object,
      default:function() {
        return {};
      }
    }
  },
  data() {
    return {
      formLogList:[],
      loading:false,
    }
  },
  methods: {
    getList(){
      this.loading = true;
      listLog({customerId:this.customerForm.customerId}).then(res => {
        this.formLogList=res.data;
        this.loading=false;
      })
    },
  }
}
</script>
<style scoped lang="scss">
.operate-container{
  height: calc(100vh - 273px) ;
  padding: 10px;
  overflow-y: auto;
}

.el-timeline{
  padding-left: 0px;
  margin: 10px;
}

.flexRowJb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flexClo{
  display: flex;
  flex-direction: column;
}

.flexCenter {
  display: flex;
  align-items: center;
}
::v-deep{
  .el-collapse-item__header{
    border-bottom:0px solid #e6ebf5;
  }
  .el-collapse{
    border-top:0px solid #e6ebf5;
  }
  .el-collapse-item__wrap{
    border-bottom:0px solid #e6ebf5;
  }
}

</style>
